<template>
	<view class="e-p-b-20 order-item-box bg-white" v-if="info" @tap.stop="$goTo('/pages/teamOrder/detail', {id: info.id})">
		<view class="e-flex e-p-20">
			<view class="e-flex-1 e-flex">
				<load-image mode="aspectFit" :size="['48rpx']"  :src="info.userPhoto" v-if="info.userPhoto">
				</load-image>
				<app-image mode="aspectFit" :size="['48rpx']" src="default-headerImg.png" v-else />
				<text class="e-font-28 c-333 fw-600 e-p-l-12">{{info.userNickName}}</text>
			</view>
			<view class="e-p-l-20" :style="{color: AppSkin.primary}">
				{{$t(getReceivingStatusText(info.receivingStatus))}}
			</view>
		</view>
		<view class="" v-if="info.params.order">
			<view class="e-p-20 e-flex " v-for="item in info.params.order.deputys">
				<load-image mode="aspectFit" :size="['200rpx']"  :src="item.commodityUrl" >
				</load-image>
				<view class="e-p-l-20 e-flex-1">
					<view class="e-flex e-p-b-10">
						<view class="e-flex-1 e-p-r-18 e-line-2 c-333 e-font-28">
							{{item.commodityName}}
						</view>
						<view class="c-333 ">
							<text class="e-font-20">{{$unitEn}}</text>
							<text class="e-font-28 fw-600">{{item.deputyMoney}}</text>
						</view>
					</view>
					<view class="e-flex e-p-b-34 e-font-26" style="color: #808080;">
						<view class="e-flex-1">
							{{item.commoditySpecName}}
						</view>
						<view class="">
							x{{item.commodityCount}}
						</view>
					</view>
					<view class="e-font-26" style="color: #808080;">
						<!-- SKU:{{item.commoditySpecId}} -->
					</view>
				</view>
			</view>
		</view>
		<view class="e-p-20 e-font-26" v-if="info.params.order && info.params.order.createTime">
			<view class="e-p-b-20 e-flex justify-between" v-if="info.params.order.createTime">
				<text style="color: #808080;">{{ $t('order.下单时间') }}：</text>
				<text>{{info.params.order.createTime}}</text>
			</view>
			<view class="e-p-b-20 e-flex justify-between" v-if="info.params.order && info.params.order.payTime">
				<text style="color: #808080;">{{ $t('order.付款时间') }}：</text>
				<text>{{info.params.order.payTime}}</text>
			</view>
		</view>
		<view class="e-flex e-p-t-26 e-p-r-20 e-p-b-24 c-333 fw-600" style="justify-content: flex-end;">
			<view class="e-flex e-font-26 fw-600 c-333">
				<text class="e-p-r-4">{{$t('order.佣金')}}</text>
				<text class="c-red">{{$unitEn}}{{info.money}}</text>
			</view>
			<view class="e-p-l-10 e-p-r-20 status-box" :style="{background: info.state == 1 ? AppSkin.primary:' #999999'}">
				<text v-if="info.state === 1">{{$t('order.已分佣')}}</text>
				<text v-else-if="info.state === 0">{{$t('order.待分佣')}}</text>
				<text v-else>{{$t('order.已取消')}}</text>
			</view>
			<template v-if="info.params.order">
				<view class="" v-if="info.receivingStatus !== 5">
					<text>{{ $t('order.实付金额') }}</text>
					<text>{{$unitEn}}{{info.params.order.orderMoneyPay}}</text>
				</view>
				<view class="" v-else>
					<text>{{ $t('order.amountPayable') }}</text>
					<text>{{$unitEn}}{{info.orderMoneyPay}}</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup lang="ts">
	import type { TeamOrderItem,DictsItem } from '@/common/request/api'
	import { useInit } from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	
	
	const props = withDefaults(defineProps<{
		info:TeamOrderItem
		statusText:DictsItem[]
	}>(),{})
	
	const { AppSkin } = storeToRefs(useInit())
	
	const getReceivingStatusText = (status:number) => {
		let text = ''
		props.statusText.some(item => {
			if (item.dictValue === `${status}`) {
				text = item.dictLabel
				return true
			}
		})
		return text
	}

</script>

<style lang="scss" scoped>
	.order-item-box {
		border-radius: 20rpx;
	}
	.hexiao-btn {
		width: 172rpx;
		height: 70rpx;
		border-radius: 36rpx;
		border: 1px solid;
	}
	.img-200 {
		width: 200rpx;
		height: 200rpx;
	}
	.flex-start {
		align-items: flex-start;
	}
	.status-box {
		background: #999999;
		border-radius: 18rpx 18rpx 18rpx 0px;
		padding: 2rpx 8rpx 2rpx 10rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		color: #fff;
	}
</style>